
<!doctype html>
<html lang="en">
    <head>
        <title>BodyVisualiser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        
        <div id="info">BodyVisualiser for Valentina Project</div>
        <div id="info"><a href="female.html">Switch to female body.</a></div>
        <div id="info"><a href="kid.html">Switch to kid's body.</a></div>
        <div id="container"></div>
        
        <script src="js/three.js"></script>
        
        <script src="js/UCSCharacter.js"></script>

        <script src='js/data.gui.js'></script>
                
        <script src="js/Orbit.js"></script>

        <script type="text/template" id="measurement-list"> </script>
        
        <script>
            
            function update(measurement) {
                character.updateMorphs({}, measurement);
            }
            
            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight;

            var container;

            var camera, scene;
            var renderer;
            
            var mesh;
            //Adding the measurement variable
            // var measurements=[measurement.data.mid_neck_girth,measurement.data]//add other measuremnts here in the order
            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            var clock = new THREE.Clock();
            
            var gui, skinConfig, morphConfig;
                
            // var measurements_object={measurement:top.frames.measurements};
                // console.log("the values is"+measurements_object.measurement);
            init();
        
            animate();
            

            function init() {

                container = document.getElementById( 'container' );
                camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 );
                camera.position.set(-9.50,3028.228,3324.432);

                scene = new THREE.Scene();

                // LIGHTS


                var light = new THREE.DirectionalLight( 0xffffff, 1 );
                light.position.set( 0, -1, 0 );
                light.position.set( 13, 5, 0 );
                scene.add( light );

                // RENDERER

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
                renderer.setClearColor( 0xffffff );
                container.appendChild( renderer.domElement );

                // CHARACTER
                // Is it necessary to define `character` globally? Initialize with `var` to avoid
                character = new THREE.prototype();
                character.onLoadComplete = function() {
                    //console.log( "Load Complete" );
                    //console.log( character.numSkins + " skins and " + character.numMorphs + " morphtargets loaded." );
                    //gui = new dat.GUI();
                    //setupMorphsGUI();
                    //gui.width = 300;
                    //gui.open();
            
                }
                
                var loader = new THREE.XHRLoader();
                loader.load("models/skinned/testconfig.json", function ( text ) {

                    var config = JSON.parse( text );
                    character.loadParts( config );
                    scene.add( character.root );
                } );

                window.addEventListener( 'resize', onWindowResize, false );
                
                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.center.set( 0, 3000, 0);

                controls.addEventListener( 'change', render );

            }
            
        
            
            function setupMorphsGUI() {
                
                var morphGui = gui.addFolder( "Morphs" );
                
                morphConfig = {};
                
                var morphCallback = function( index ) {
                    return function () {

                        character.updateMorphs( morphConfig,top.frames.measurements);
                    }
                }
                
                for ( var i = 0; i < character.numMorphs; i ++ ) {
                    var morphName = character.morphs[ i ];
                    
                    morphConfig[ morphName ] = top.frames.measurements[i];
                    
                }
                
                for ( var i = 0; i < character.numMorphs; i ++ ) {
                    
                    morphGui.add( morphConfig,character.morphs[ i ]  ).min( character.morphslowlimit[ i ] ).max(character.morphshighlimit[ i ]).onChange( morphCallback( i ) );
                }
                
                morphGui.open();
            
            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;      
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            
            //

            function animate() {
          
                requestAnimationFrame( animate );
            
                controls.update();

                render();
    

            }

            function render() {

                
                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>